import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Block} from '@tarojs/components'
import './confirm.scss';

interface IProps {
  width?: number | string
  headerText?: string
  headerAlign?: string
  content: string
  success?: Function
  cancel?: Function
  close?: Function
  successText?: string
  cancelText?: string
}

export default class Confirm extends Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }

  render() {
    const props: any = this.props;
    const {
      width = 70,
      headerText,
      content,
      headerAlign,
      successText = "确定",
      cancelText = "取消",
      cancel,
      success,
      close
    } = props;
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <Block>
        <View className='confirm' onClick={() => close && close()}>
          <View
            className='confirm-block'
            style={
              `width: ${width}%;`
            }
            onClick={(e) => e.stopPropagation()}
          >
            <View
              className={`confirm-block-header ${!headerText && 'hide'}`}
              style={
                `text-align: ${headerAlign};`
              }
            >
              {headerText}
            </View>
            <View
              className='confirm-block-content'
              style={
                `text-align: ${headerAlign}; ${headerText && 'padding-top: 25px;'}`
              }
            >
              {content}
            </View>
            <View className='confirm-block-footer'>
              <View className='confirm-block-footer-btn active' style={`background: ${process.env.mainColor};`}
                onClick={() => success && success()}
              >
                {successText}
              </View>
              <View className='confirm-block-footer-btn' onClick={() => cancel && cancel()}>
                {cancelText}
              </View>
            </View>
          </View>
        </View>
      </Block>
    )
  }
}
